<template>
    <div class="carousel">
        <div class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
            <div v-for="(item, index) in images" :key="index" class="carousel-item">
                <img :src="item.src" :alt="item.alt" />
            </div>
        </div>
        <button @click="prev">Prev</button>
        <button @click="next">Next</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const currentIndex = ref(0);
const images = [
    { src: './img/view1.jpg', alt: 'Image 1' },
    { src: './img/view2.jpg', alt: 'Image 2' },
    { src: './img/view3.jpg', alt: 'Image 3' },
];

function next() {
    currentIndex.value = (currentIndex.value + 1) % images.length;
}

function prev() {
    currentIndex.value = (currentIndex.value - 1 + images.length) % images.length;
}
</script>

<style scoped>
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    flex: 0 0 auto;
    width: 100%;
}

.carousel-item img {
    width: 100%;
    height: auto;
}
</style>